<template>
    <div class="edit-popup">
        <popup
            ref="popupRef"
            :title="popupTitle"
            :async="true"
            width="1000px"
            :clickModalClose="true"
            @confirm="handleSubmit"
            @close="handleClose"
        >
            <el-form ref="formRef" :model="formData" label-width="120px" :rules="formRules" :inline="true">
                <el-form-item label="客户名称" prop="clientName">
                    <el-input class="w-[300px]" v-model="formData.clientName" placeholder="请输入客户名称" />
                </el-form-item>
                <el-form-item label="分配状态" prop="state">
                    <el-select
                        v-model="formData.state"
                        placeholder="请选择分配状态"
                        size="large"
                        class="w-[300px]"
                    >
                      <el-option
                          v-for="item in StartList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                      />
                    </el-select>
                </el-form-item>
                <el-form-item label="客户来源" prop="clientSource">
                    <el-input class="w-[300px]" v-model="formData.clientSource" placeholder="请输入客户来源" />
                </el-form-item>
                <el-form-item label="所属行业" prop="belongIndustry">
                    <el-input class="w-[300px]" v-model="formData.belongIndustry" placeholder="请输入所属行业" />
                </el-form-item>
                <el-form-item label="咨询业务" prop="advisoryService">
                    <el-input class="w-[300px]" v-model="formData.advisoryService" placeholder="请输入咨询业务" />
                </el-form-item>
                <el-form-item label="业务报价" prop="businessPrice">
                    <el-input class="w-[300px]" v-model="formData.businessPrice" placeholder="请输入业务报价" />
                </el-form-item>
                <el-form-item label="联系人" prop="contacts">
                    <el-input class="w-[300px]" v-model="formData.contacts" placeholder="请输入联系人" />
                </el-form-item>
                <el-form-item label="职务" prop="post">
                    <el-input class="w-[300px]" v-model="formData.post" placeholder="请输入职务" />
                </el-form-item>
                <el-form-item label="电话" prop="phone">
                    <el-input class="w-[300px]" v-model="formData.phone" placeholder="请输入电话" />
                </el-form-item>
                <el-form-item label="省" prop="province">
                    <el-input class="w-[300px]" v-model="formData.province" placeholder="请输入省" />
                </el-form-item>
                <el-form-item label="市" prop="city">
                    <el-input class="w-[300px]" v-model="formData.city" placeholder="请输入市" />
                </el-form-item>
                <el-form-item label="区" prop="district">
                    <el-input class="w-[300px]" v-model="formData.district" placeholder="请输入区" />
                </el-form-item>
                <el-form-item label="业务人员" prop="salesman">
                    <el-input class="w-[300px]" v-model="formData.salesman" placeholder="请输入业务人员" />
                </el-form-item>
                <el-form-item label="操作时间" prop="operateTime">
                    <el-date-picker
                        style="width: 300px"
                        class="flex-1 !flex"
                        v-model="formData.operateTime"
                        type="datetime"
                        clearable
                        format="YYYY/MM/DD HH:mm:ss"
                        value-format="YYYY-MM-DD HH:mm:ss"
                        placeholder="请选择操作时间"
                    />
                </el-form-item>
            </el-form>
        </popup>
    </div>
</template>
<script lang="ts" setup>
import type { FormInstance } from 'element-plus'
import {  volumeEdit, volumeAdd, volumeDetail } from '@/api/volume'
import Popup from '@/components/popup/index.vue'
import feedback from '@/utils/feedback'
import type { PropType } from 'vue'
defineProps({
    dictData: {
        type: Object as PropType<Record<string, any[]>>,
        default: () => ({})
    }
})
const emit = defineEmits(['success', 'close'])
const formRef = shallowRef<FormInstance>()
const popupRef = shallowRef<InstanceType<typeof Popup>>()
const mode = ref('add')
const popupTitle = computed(() => {
    return mode.value == 'edit' ? '编辑网销客户' : '新增网销客户'
})
const StartList = ref([{label:"未分配",value:0},{label:"已分配",value:1},{label:"已编辑",value:"2"}])
const formData = reactive({
    id: '',
    clientName: '',
    state: '',
    clientSource: '',
    belongIndustry: '',
    advisoryService: '',
    businessPrice: '',
    contacts: '',
    post: '',
    phone: '',
    province: '',
    city: '',
    district: '',
    salesman: '',
    operateTime: '',
})

const formRules = {
    id: [
        {
            required: true,
            message: '请输入网销客户id',
            trigger: ['blur']
        }
    ],
    clientName: [
        {
            required: true,
            message: '请输入客户名称',
            trigger: ['blur']
        }
    ],
    state: [
        {
            required: true,
            message: '请输入状态',
            trigger: ['blur']
        }
    ],
    clientSource: [
        {
            required: true,
            message: '请输入客户来源',
            trigger: ['blur']
        }
    ],
    belongIndustry: [
        {
            required: true,
            message: '请输入所属行业',
            trigger: ['blur']
        }
    ],
    advisoryService: [
        {
            required: true,
            message: '请输入咨询业务',
            trigger: ['blur']
        }
    ],
    businessPrice: [
        {
            required: true,
            message: '请输入业务报价',
            trigger: ['blur']
        }
    ],
    contacts: [
        {
            required: true,
            message: '请输入联系人',
            trigger: ['blur']
        }
    ],
    post: [
        {
            required: true,
            message: '请输入职务',
            trigger: ['blur']
        }
    ],
    phone: [
        {
            required: true,
            message: '请输入电话',
            trigger: ['blur']
        }
    ],
    salesman: [
        {
            required: true,
            message: '请输入业务人员',
            trigger: ['blur']
        }
    ]
}

const handleSubmit = async () => {
    await formRef.value?.validate()
  const d = new Date(formData.operateTime);
  const year = d.getFullYear();
  const month = String(d.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始，所以需要加 1
  const day = String(d.getDate()).padStart(2, '0');
  const hours = String(d.getHours()).padStart(2, '0');
  const minutes = String(d.getMinutes()).padStart(2, '0');
  const seconds = String(d.getSeconds()).padStart(2, '0');
  formData.operateTime= `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
    const data: any = { ...formData }
    mode.value == 'edit' ? await volumeEdit(data) : await volumeAdd(data)
    popupRef.value?.close()
    feedback.msgSuccess('操作成功')
    emit('success')
}

const open = (type = 'add') => {
    mode.value = type
    popupRef.value?.open()
}

const setFormData = async (data: Record<string, any>) => {
    for (const key in formData) {
        if (data[key] != null && data[key] != undefined) {
            //@ts-ignore
            formData[key] = data[key]
        }
    }
}

const getDetail = async (row: Record<string, any>) => {
    const data = await volumeDetail({
        id: row.id
    })
    setFormData(data)
}

const handleClose = () => {
    emit('close')
}

defineExpose({
    open,
    setFormData,
    getDetail
})
</script>
